<template>
  <div class="bottom">
        <span v-for="(item,index) in tanktext" :key="index" :class="{sp:true,active:gaoliang==index}" @click="dianji(index)">{{item.text}}</span>
   </div>
</template>

<script>
export default {
    data(){
        return{
            gaoliang:0,
            tanktext:[
                {text:'首页'},
                {text:'订单'},
                {text:'我的'}
            ],
        }
    },
    methods:{
        dianji(index){
        console.log(23);
        this.gaoliang=index
        }
    }
}
</script>

<style>
 .bottom{
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    border-top: 2px solid gray;
   }
   .bottom span{
    padding-top: 5px;
   }
   .bottom .sp.active{
    color: red;
   }
</style>